<template>
  <div class="vpd-table-wrapper" :style="{
          width: val.w + 'px',
          height: height + 'px',
          border: val.borderWidth+ 'px solid '+val.borderColor,
          backgroundColor: val.backgroundColor
       }">
    <div class="vpd-table-title" v-if="val.title">
      <div style="width: 70%">
        <vpd-text v-if="val.title && val.title.type" :val="val.title"/>
        <span v-else>{{val.title}}</span><!--  兼容最早的字符串标题 -->
      </div>
      <div style="width: 30%">
        <el-button class="pull-right" style="margin-right: 10px" type="text" @click="getList">刷新</el-button>
      </div>

    </div>
    <el-table border stripe :data="tableData" v-loading="loading" :height="tableHeight">
      <el-table-column v-for="col in val.columns" :key="col.code"
                       :prop="col.code"
                       :label="col.name"
                       :align="col.align"
      >
      </el-table-column>
    </el-table>
    <pagination v-if="val.showPagination"
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                @pagination="getList"
    />
  </div>
</template>
<script>
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';
  import VpdText from '../text/index'

  const NAME = 'vpd-table';
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-table',
    title: '表格',
    panel: StylePane,
    setting: {
      type: NAME,
      title: '表格',
      dataType: 'array', //期望的数据格式
      x: 0,
      y: 0,
      w: 600,
      h: 400,
      minWidth: 300,
      minHeight: 300,
      backgroundColor: '#fff',
      borderWidth: 1,
      borderColor: '#E8EBEE',
      labelWidth: 100,
      columns: [],
      showPagination: true,
    },
    components: {
      VpdText
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        loading: false,
        total: 1,
        pageNum: 1,
        pageSize: 20,
        tableData: [],
      }
    },
    computed: {
      height() {
        return this.val.h - this.val.borderWidth * 2;
      },
      tableHeight() {
        let h = this.height;
        if (this.val.title) {
          h -= 30;
        }
        if (this.val.showPagination) {
          h -= 32;
        }
        return h;
      }
    },
    watch: {},
    mounted() {

    },
    methods: {
      getList() {
        this.queryParams.pageSize = this.pageSize;
        this.queryParams.pageNum = this.pageNum;

        this.loading = true;
        try {
          this.queryData();
        } catch (e) {
          this.loading = false;
        }

      },
      updateData(data) {
        this.loading = false;
        console.log('updateData', data);
        this.tableData = data.rows;
        this.total = data.total;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .vpd-table-wrapper {
    display: flex;
    flex-direction: column;

  }

  .vpd-table-title {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
  }

  .vpd-table {
    flex: 1;
  }

  .pagination-container {
    height: 32px;
    margin: 0;
    padding: 0 !important;
  }
</style>
